<template>
	<s-layout title="编辑资料" navbar="inner" :bgStyle="{
    color: '#FFFFFF' }" color="#333333" :navbarStyle="{type:'color',color:'#fff'}">
		<view class="form-box">
			<view class="form-box-upload-avatar" @click="select">
				<image class="avatar" v-if="state.info.avatar" :src="state.info.avatar" mode="aspectFill"></image>
				<image v-else class="avatar"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200">
				</image>
				<view class="avatar-text">修改</view>
			</view>

			<view style="padding:0 32rpx;">
				<uni-forms ref="form" :modelValue="state.info">
					<uni-forms-item label="用户昵称">
						<view class="form-box-input-item">
							<input type="text" :maxlength="12" v-model="state.info.nickname" placeholder="请输入昵称" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="个人简介">
						<view class="form-box-input-item">
							<input type="text" :maxlength="80" v-model="state.info.bio" placeholder="这个人很懒没写什么简介" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="性别">
						<view class="form-box-input-item" style="display:flex;justify-content:space-between;">
							<view></view>
							<view>
								<uni-data-checkbox selectedTextColor="#14C89F" selectedColor="#14C89F"
									v-model="state.info.gender" :localdata="Gender"></uni-data-checkbox>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="手机号">
						<view class="form-box-input-item">
							<input type="number" disabled :maxlength="11" v-model="state.info.mobile" />
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="btn-box" @click="submit">保存</view>
	</s-layout>
</template>
<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import assApi from '@/association/api'
	import association from '@/association/store'
	// #ifdef APP
	import {
		showAuditModal
	} from '@/sheep/hooks/useAudit.js'
	// #endif

	const Gender = [{
			text: '男',
			value: 1
		},
		{
			text: '女',
			value: 0
		}
	]

	const state = reactive({
		info: {
			nickname: '',
			gender: 1,
			mobile: '',
			bio: '',
			avatar: ''
		}
	})

	onLoad((options) => {
		if (options) {
			state.id = options.id
			getDetails()
		}
	})

	const submit = async () => {
		const {
			code,
			data
		} = await assApi.user.edit_info({
			nickname: state.info.nickname,
			gender: state.info.gender,
			bio: state.info.bio || '这个人很懒没写什么简介',
			avatar: state.info.avatar,
		})

		if (code === 1) {
			association().updateUserData()
			uni.showToast({
				title: '修改成功',
				icon: 'none',
				duration: 1500
			})
			uni.$emit('setInfo', state.info)
		}
	}

	const select = () => {
		// #ifdef APP
		showAuditModal('WRITE_EXTERNAL_STORAGE,CAMERA', () => {
			uni.chooseMedia({
				count: 1,
				sizeType: ['original'],
				sourceType: ['camera', 'album'],
				success: async (img) => {
					let res = await sheep.$api.app.upload(formatFile(img)[0].url)
					state.info.avatar = res.fullurl
				},
			})
		}, null, false)
		// #endif
		// #ifdef MP || H5
		uni.chooseMedia({
			count: 1,
			sizeType: ['original'],
			sourceType: ['camera', 'album'],
			success: async (img) => {
				let res = await sheep.$api.app.upload(formatFile(img)[0].url)
				state.info.avatar = res.fullurl
			},
		})
		// #endif
	}

	function formatFile(res) {
		if (Array.isArray(res.tempFiles)) {
			return res.tempFiles.map((item) => ({
				// #ifdef MP-WEIXIN
				url: item.tempFilePath,
				type: 'image',
				// #endif

				size: item.size,

				// #ifndef MP-WEIXIN
				type: item.type,
				url: item.path,
				// #endif
			}));
		} else {
			return [{
				url: res.tempFilePath,
				type: res.tempFile.type,
				size: res.tempFile.size,
			}, ];
		}
	}

	const getDetails = async () => {
		const {
			code,
			data
		} = await assApi.user.info()
		if (code === 1) {
			state.info.avatar = data.avatar
			state.info.bio = data.bio
			state.info.gender = data.gender
			state.info.mobile = data.mobile
			state.info.nickname = data.nickname
		}
	}
</script>
<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	::v-deep {
		.uni-forms-item__inner {
			padding-bottom: 20rpx
		}

		.uni-error-message {
			height: 20rpx;
			display: flex;
		}

		.uni-error-message-text {
			font-size: 20rpx;
			line-height: 1;
		}
	}

	.form-box {
		width: 100%;
		background: #FFFFFF;
		padding: 52rpx 0 0;
		position: relative;


		.form-box-upload-avatar {
			width: 160rpx;
			height: 160rpx;
			margin: 0 auto 60rpx;
			position: relative;
			overflow: hidden;
			border-radius: 50%;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.avatar-text {
				width: 160rpx;
				height: 35rpx;
				background: rgba(0, 0, 0, 0.5);
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				z-index: 1;
				font-size: 24rpx;
				text-align: center;
				line-height: 35rpx;
				color: #FFFFFF;
			}

		}
	}

	.form-box-input-item {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		input {
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
		}
	}

	::v-deep .uni-forms-item__label {
		height: 100rpx;
		line-height: 100rpx;
	}

	::v-deep .uni-forms-item__inner {
		padding-bottom: 0;
		border-bottom: 1rpx solid #F5F5F5;
	}

	::v-deep .uni-error-message {
		opacity: 0;
	}

	::v-deep .checklist-box {
		margin: 0 0 0 30rpx !important;
	}

	.gender-active {
		background: rgba(20, 200, 159, 0.0942) !important;
		border: 1rpx solid #14C89F !important;
	}

	.btn-box {
		width: 622rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: #14C89F;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 100rpx auto 0;
	}
</style>